 /*
 * @description: 寝室视频上传审核列表
 * @Author: along
 * @Date: 2020-10-16
 * @Last Modified by: along
 * @Last Modified time: 2020-10-20
 */
<template>
    <div class="dormVideoUpload-examine">
        <div
            class="content-wrapper"
            ref="contentWrapper"
        >
            <!-- 基本信息 -->
            <div class="base-info">
                <div class="header">
                    <div class="header-title">基础信息</div>
                    <el-button
                        type="text"
                        size="medium"
                        @click="handleRoute('dormExamineList')"
                    >
                        返回
                    </el-button>
                </div>
                <div class="content">
                    <div class="base-info-item">
                        <div class="item-label">视频组名称：</div>
                        <div class="item-value">{{ baseInfo.title ? baseInfo.title : '--' }}</div>
                    </div>
                    <!--<div class="base-info-item">
                        <div class="item-label">产品名称：</div>
                        <div class="item-value">{{ baseInfo.series_title ? baseInfo.series_title : '&#45;&#45;' }}</div>
                    </div>
                    <div class="base-info-item">
                        <div class="item-label">学校名称：</div>
                        <div class="item-value">{{ baseInfo.school_name ? baseInfo.school_name : '&#45;&#45;' }}</div>
                    </div>-->
                    <div class="base-info-item">
                        <div class="item-label">视频数量：</div>
                        <div class="item-value">{{ baseInfo.count }}</div>
                    </div>
                    <div class="base-info-item">
                        <div class="item-label">学校名称：</div>
                        <div class="item-value">{{ baseInfo.school_name ? baseInfo.school_name : '--' }}</div>
                    </div>
                    <div class="base-info-item">
                        <div class="item-label">寝室性别：</div>
                        <div class="item-value">
                            {{ baseInfo.sex === 1 ? '男' : baseInfo.sex === 2 ? '女' : '不限' }}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 公司信息 -->
            <div
                class="base-info"
                style="padding-bottom: 24px"
            >
                <div class="header">
                    <div class="header-title">公司信息</div>
                </div>
                <div class="content">
                    <!-- table -->
                    <el-table
                        :data="baseInfo.hire_link_list"
                        style="width: 100%;"
                        height="calc(100% - 68px)"
                        ref="tempLateName"
                        class="data-table"
                    >
                        <el-table-column
                            label="序号"
                            align="center"
                            width="80"
                            type="index"
                        />
                        <el-table-column
                            prop="company_name"
                            label="公司名称"
                            show-overflow-tooltip
                            align="left"
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="series_title"
                            label="产品名称"
                            show-overflow-tooltip
                            align="left"
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="series_index"
                            label="批次"
                            show-overflow-tooltip
                            align="center"
                        />
                    </el-table>
                </div>
            </div>
            <div
                class="tableList"
                :style="{height: `${autoHeight}px`}"
            >
                <div class="header">
                    <p class="title">视频审核</p>
                </div>
                <div class="filter">
                    <div class="filter-left">
                        <el-radio-group
                            v-model="formData.status"
                            size="small"
                            @change="getTableData(1)"
                        >
                            <!--<el-radio-button label="99" >全部</el-radio-button>-->
                            <!-- <el-radio-button label="0">待提审</el-radio-button> -->
                            <el-radio-button label="1">待审核</el-radio-button>
                            <el-radio-button label="2">已通过</el-radio-button>
                            <el-radio-button label="-1">未通过</el-radio-button>
                        </el-radio-group>
                        <p class="filter-left-title">视频名称</p>
                        <el-input
                            v-model="formData.video_name"
                            placeholder="请输入视频名称"
                            size="small"
                            clearable
                            suffix-icon="el-icon-search"
                            @change="getTableData(1)"
                            @keyup.native.enter="getTableData(1)"
                            :style="{width: '234px'}"
                        />
                        <p class="filter-left-title">学校名称</p>
                        <el-select
                            v-model="formData.keyword_school"
                            filterable
                            clearable
                            size="small"
                            reserve-keyword
                            placeholder="请输入学校名称"
                            :loading="loading"
                            @change="getTableData(1)"
                        >
                            <el-option
                                v-for="item in school_tree"
                                :key="item.school_id"
                                :label="item.school_name"
                                :value="item.school_id"
                            />
                        </el-select>
                        <el-button
                            size="small"
                            type="primary"
                            :style="{marginLeft: '24px'}"
                            @click="getTableData(1)"
                        >
                            搜索
                        </el-button>
                    </div>
                </div>
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: calc(100% - 48px)"
                    ref="dormVideoUp"
                    @select="fnSelect"
                    @select-all="fnSelectAllTop"
                    @selection-change="handleSelectionChange"
                    :style="{margin: '0 24px 0 24px'}"
                >
                    <el-table-column
                        type="selection"
                        width="50"
                        align="center"
                        fixed="left"
                        key="selection"
                        v-if="mode !== 'detail'"
                    />
                    <el-table-column
                        type="index"
                        width="80"
                        label="序号"
                        align="center"
                        key="index"
                    />
                    <el-table-column
                        prop="video_name"
                        label="视频名称"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        key="video_name"
                    />
                    <el-table-column
                        prop="school_name"
                        label="学校名称"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        key="school_name"
                    />
                    <el-table-column
                        prop="video_size"
                        label="视频大小"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        key="video-size"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.video_size | transformByte }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="video_duration"
                        label="视频长度"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        key="video_duration"
                    >
                        <template slot-scope="scope">
                            <p v-if="scope.row.video_duration">{{ scope.row.video_duration }}s</p>
                            <p v-else>--</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="video_trans_status"
                        label="转换状态"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="left"
                        key="video_trans_status"
                    >
                        <template slot-scope="scope">
                            <p v-if="scope.row.video_trans_status == 1">转换中</p>
                            <p v-else-if="scope.row.video_trans_status == 2">转换成功</p>
                            <p v-else-if="scope.row.video_trans_status == -1">转换失败</p>
                            <p v-else-if="scope.row.video_trans_status == 0">待转换</p>
                            <p v-else>--</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="audit_status"
                        label="审核状态"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        key="audit_status"
                    >
                        <template slot-scope="scope">
                            <div class="status-wrapper">
                                <div
                                    class="status-dot normal"
                                    v-if="scope.row.audit_status === 0"
                                />
                                <div
                                    v-else
                                    :class="['status-dot',scope.row.audit_status === 1 ? 'warning' : (scope.row.audit_status === 2 ? 'success' : 'danger')]"/>
                                <div
                                    class="status-name"
                                    v-if="scope.row.audit_status == 1"
                                >待审核</div>
                                <div
                                    class="status-name"
                                    v-if="scope.row.audit_status == 2"
                                >已通过</div>
                                <div
                                    class="status-name"
                                    v-if="scope.row.audit_status == -1"
                                >未通过</div>
                                <div
                                    class="status-name"
                                    v-if="scope.row.audit_status == 0"
                                >待提审</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        fixed="right"
                        :width="200"
                        key="option"
                        v-if="mode !== 'detail'"
                    >
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                class="curse-add"
                                :id="'playVideo' + scope.$index"
                                @click="playVideo(scope.row, scope.$index)"
                            >
                                播放
                            </el-button>
                            <el-button
                                type="text"
                                class="curse-add"
                                @click="adoptVideo(scope.row)"
                                :disabled="scope.row.audit_status == 0"
                            >
                                通过
                            </el-button>
                            <el-button
                                type="text"
                                class="curse-add"
                                @click="noAdoptVideo(scope.row)"
                                :disabled="scope.row.audit_status == 0"
                            >
                                不通过
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- /table -->

                <!-- /分页 -->
                <div class="pagination-wrapper clearfix">
                    <template v-if="mode !== 'detail'">
                        <el-checkbox
                            v-model="checkedAll"
                            :indeterminate="checkIndeterminate"
                            @change="fnChangeChecked"
                        >全选</el-checkbox>
                        <el-button
                            type="text"
                            :disabled="multipleSelection.length == 0 ? true : false"
                            @click="adoptAll()"
                            :style="{marginLeft: '15px'}"
                        >审核通过</el-button>
                        <el-button
                            type="text"
                            :disabled="multipleSelection.length == 0 ? true : false"
                            @click="noAdoptAll()"
                        >审核不通过</el-button>
                    </template>
                    <el-pagination
                        background
                        layout="total,sizes, prev, pager, next"
                        :current-page.sync="page.now_page"
                        :total="page.total_count"
                        :page-size="page.page_size"
                        @current-change="getTableData"
                        @size-change="handleSizeChange"
                    />
                </div>
            </div>
        </div>


        <!-- 审核通过弹窗 -->
        <dialog-delete
            ref="adopt"
            :url="'http://cdn.zsdx.cn/phaadmin/dialog-waring.png'"
            :title="'确认视频审核通过吗?'"
            :content="'确认之后审核结果不可更改'"
            @confrim="confrim()"
        />

        <!-- 审核不通过弹窗 -->
        <dialog-delete
            ref="noAdopt"
            :url="'http://cdn.zsdx.cn/phaadmin/dialog-waring.png'"
            :title="'确认视频审核不通过吗?'"
            :content="'确认之后审核结果不可更改'"
            @confrim="confrimNo()"
        />

        <!-- 批量审核通过弹窗 -->
        <dialog-delete
            ref="adoptAll"
            :url="'http://cdn.zsdx.cn/phaadmin/dialog-waring.png'"
            :title="'所选择的视频确定审核通过吗?'"
            :content="'确认之后审核结果不可更改'"
            @confrim="confrimAll()"
        />

        <!-- 批量审核不通过弹窗 -->
        <dialog-delete
            ref="noAdoptAll"
            :url="'http://cdn.zsdx.cn/phaadmin/dialog-waring.png'"
            :title="'所选择的视频确定审核不通过吗?'"
            :content="'确认之后审核结果不可更改'"
            @confrim="confrimNoAll()"
        />

        <!-- 视频播放组件 -->
        <video-simple
            ref="videoSimple"
            :url="url"
            :top="54"
            :left="left"
        />

        <!-- 视频不通过原因 -->
        <el-dialog
            title="视频不通过"
            :visible.sync="dialogVisible"
            width="640px"
            :close-on-click-modal="false"
        >
            <div class="resonWrap">
                <p class="resonWrap-title">
                    <span>*</span>
                    不通过原因
                </p>
                <el-input
                    type="textarea"
                    placeholder="请输入不通过的原因..."
                    v-model="reson"
                    maxlength="140"
                    show-word-limit
                    :autosize="{ minRows: 3, maxRows: 6}"
                />
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="dialogVisible = false"
                    size="medium"
                    :style="{width: '120px', marginRight: '32px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :disabled="!reson"
                    :style="{width: '120px'}"
                    @click="confirmNoAdopt()"
                >
                    确 定
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import dialogDelete from '@/components/dialog/index.vue';
import videoSimple from '@/components/dorm/video-simple.vue';
import { back } from '@/mixin/back';

const CONFIG = {
    video_batch: '',//视频批次
    batch_name: '',//产品名称
    shop_title: '',//发送客服
    status: '1',//审核状态
    video_name: '',//视频名称
    keyword_school: '',//学校名称
};


const TABLE = {
    checkIndeterminate: false,
    multipleSelection: [],
    checkedAll: false,
    dialogVisible: false,
    reson: '',//不通过原因
};

export default {
    mixins: [back],
    components: {
        dialogDelete,
        videoSimple
    },
    data () {
        return {
            // detail为查看 不可操作
            mode: '',
            ID: '',//批次唯一ID
            video_no: '',//视频唯一id
            left: 0,//视频组件右边距
            url: '',
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 10
            },
            formData: {
                ...CONFIG
            },
            baseInfo: {},
            ...TABLE,
            school_tree: [],
            tableData: [],
            authResult: {},
            loading: false,
            type: '',//单个删除 批量删除区分
            autoHeight: 1000,
            screenWidth: document.body.clientWidth,
        };
    },
    watch: {
        dialogVisible (val) {
            if(!val) {
                this.reson = '';
            }
        },
        screenWidth (val) {
            if (!this.timer) {
                this.screenWidth = val;
                this.timer = true;

                setTimeout( () => {
                    this.calcAutoHeight();
                    this.timer = false;
                }, 300);
            }
        }
    },
    filters: {
        transformByte(size) {
            if (!size) {
                return '0B';
            }

            var num = 1024.0; // byte

            if (size < num) {
                return size + 'B';
            }
            if (size < Math.pow(num, 2)) {
                return (size / num).toFixed(2) + 'K';
            } // kb
            if (size < Math.pow(num, 3)) {
                return (size / Math.pow(num, 2)).toFixed(2) + 'M';
            } // M
            if (size < Math.pow(num, 4)) {
                return (size / Math.pow(num, 3)).toFixed(2) + 'G';
            } // G
            return (size / Math.pow(num, 4)).toFixed(2) + 'T'; // T
        }
    },
    mounted () {
        this.init();
        this.calcAutoHeight();
        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth;
                this.screenWidth = window.screenWidth;
            })();
        };
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            this.$store.commit('SET_HEADER', [{ title: "官网"},{ title: "商家增值服务"},{title: '寝室视频审核', path: '/bid/dorm-examine-list'},{title: '审核视频'}]);
            this.authResult = this.$route.meta.authResult;
            let query = this.$route.query;

            if(query.series_no) {
                this.ID = query.series_no;
                this.getTableData();
                this.getSeries();
                this.getSchooltree();
            }
            this.mode = query.mode;
        },

        /**
         * @description 获取批次信息
         */
        getSeries () {
            this.$post('/student/room_series%5Cget', {
                series_no: this.ID
            }, resp => {
                if (resp.code == 1) {
                    this.baseInfo = resp.data;
                }
            });
        },

        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/room_series_video%5Cget_list', {
                page_id: page || this.page.now_page,
                page_size: this.page.page_size,
                series_no: this.ID,
                school_id: this.formData.keyword_school,
                video_name: this.formData.video_name,
                audit_status: this.formData.status
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 获取学校数据列表
         */
        getSchooltree () {
            this.$post('/student/room_series_video%5Cget_school_list',{
                series_no: this.ID
            },resp => {
                if (resp.code == 1) {
                    this.school_tree = resp.data;
                }
            });
        },

        /**
         * @description 通过视频
         */
        adoptVideo (row) {
            if(!this.authResult.auth_audit) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.video_no = row.video_no;
            this.$refs.adopt.showDialog();
        },

        /**
         * @description 确定通过
         */
        confrim () {
            this.$post('/student/room_series_video%5Caudit',{
                action: 'pass',
                video_no: this.video_no,
                audit_reason: ''
            },resp=>{
                if (resp.code == 1) {
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 确定审核不通过
         */
        noAdoptVideo (row) {
            if(!this.authResult.auth_audit) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.video_no = row.video_no;
            // this.$refs.noAdopt.showDialog();
            this.type = '1';
            this.dialogVisible = !this.dialogVisible;
        },

        /**
         * @description 确定不通过
         */
        confrimNo () {
            // this.type = '1';
            // this.dialogVisible = !this.dialogVisible;
        },

        /**
         * @description 确定不通过
         */
        confirmNoAdopt () {
            if(this.type == '1') {
                this.$post('/student/room_series_video%5Caudit',{
                    action: 'reject',
                    video_no: this.video_no,
                    audit_reason: this.reson
                },resp=>{
                    if (resp.code == 1) {
                        this.dialogVisible = !this.dialogVisible;
                        this.getTableData();
                        this.$notify({
                            title: '提示',
                            message: '操作成功',
                            type: 'success',
                            duration: 2000
                        });
                    } else if (resp.code == 0) {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });
            }

            if(this.type == '2') {
                let noList = this.multipleSelection.reduce((cur,next) => {
                    cur.push(next.video_no);
                    return cur;
                },[]);

                this.$post('/student/room_series_video%5Caudit_batch',{
                    action: 'reject',
                    video_nos: noList.join(),
                    audit_reason: this.reson
                },resp=>{
                    if (resp.code == 1) {
                        this.getTableData();
                        this.dialogVisible = !this.dialogVisible;
                        this.$notify({
                            title: '提示',
                            message: '操作成功',
                            type: 'success',
                            duration: 2000
                        });
                    } else if (resp.code == 0) {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });
            }
        },

        /**
         * @description 批量审核通过
         */
        adoptAll () {
            if(!this.authResult.auth_audit_batch) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$refs.adoptAll.showDialog();
        },

        /**
         * @description 确定批量审核通过
         */
        confrimAll () {
            // console.log('multipleSelection', this.multipleSelection);

            let noList = this.multipleSelection.reduce((cur,next) => {
                cur.push(next.video_no);
                return cur;
            },[]);

            this.$post('/student/room_series_video%5Caudit_batch',{
                action: 'pass',
                video_nos: noList.join(),
                audit_reason: ''
            },resp=>{
                if (resp.code == 1) {
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 确定批量审核不通过
         */
        noAdoptAll () {
            if(!this.authResult.auth_audit_batch) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.type = '2';
            this.dialogVisible = !this.dialogVisible;
            // this.$refs.noAdoptAll.showDialog();
        },

        /**
         * @description 确定批量审核不通过
         */
        confrimNoAll () {
            // console.log('multipleSelection', this.multipleSelection);

            // this.type = '2';
            // this.dialogVisible = !this.dialogVisible;
        },

        /**
         * @description 播放视频
         */
        playVideo (row, index) {
            this.left = document.querySelector('#playVideo' + index).getClientRects()[0].x - 278 - 40;
            this.url = row.video_url;
            this.$refs.videoSimple.showVideo();
        },

        /**
         * @description 全选逻辑操作
         */
        fnSelect(selection) {
            if(selection.length == this.tableData.length) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnSelectAllTop(selection) {
            if(selection.length > 0) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnChangeChecked() {
            if(this.checkedAll){
                this.toggleSelection(1);
            }else{
                this.toggleSelection();
            }
        },
        toggleSelection(rows) {
            if (rows) {
                this.$refs.dormVideoUp.toggleAllSelection();
            } else {
                this.$refs.dormVideoUp.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 每页条数更改
         * @param page_size
         */
        handleSizeChange(page_size) {
            this.page.page_size = page_size;
            this.getTableData();
        },
        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * 动态计算高度
         */
        calcAutoHeight() {
            this.autoHeight = this.$refs.contentWrapper.offsetHeight - 12;
        }
    }
};
</script>

<style lang="less" scoped>
.dormVideoUpload-examine {
    width: 100%;
    position: relative;
    .content-wrapper {
        width: calc(100% - 24px);
        height: calc(100% - 24px);
        margin: 12px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 0;
        }
        .data-table {
            &::-webkit-scrollbar {
                width: 6px;
            }
        }
        .base-info {
            margin-bottom: 12px;
            background: #fff;
            flex-shrink: 0;
            .content {
                display: flex;
                flex-wrap: wrap;
                padding: 24px 36px 4px;
                .base-info-item {
                    width: 25%;
                    display: flex;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    margin-bottom: 20px;
                    .item-label {
                        color: #888888;
                    }
                    .item-value {
                        color: #333333;
                    }
                }
            }
            /*header*/
            .header {
                height: 66px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #F0F2F5;
                padding: 24px;

                .header-title {
                    color: #333333;
                    font-size: 20px;
                    font-weight: 500;
                }
            }
        }
        .tableList {
            background: #ffffff;
            margin-bottom: 12px;
            display: flex;
            flex-direction: column;
            height: 1200px;
            flex-shrink: 0;
            padding-bottom: 60px;
            .header {
                width: 100%;
                height: 68px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                border-bottom: 1px #EBEEF5 solid;
                padding-left: 24px;
                flex-shrink: 0;
                .title {
                    color: #333;
                    font-size: 20px;
                    font-weight: 500;
                    position: relative;
                }
                .desc {
                    color: #999;
                    font-size: 14px;
                    margin-left: 24px;
                    position: relative;
                    top: 4px;
                }
            }
            .filter {
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                box-sizing: border-box;
                padding: 0 24px;
                flex-shrink: 0;
                &-left {
                    display: flex;
                    align-items: center;
                    white-space: nowrap;
                }
                &-left-title {
                    color: #333;
                    font-size: 14px;
                    margin: 0 16px 0 32px;
                    white-space: nowrap;
                }
            }
        }
        /* 分页 */
        .pagination-wrapper {
            padding: 12px 24px;
            position: absolute;
            width: calc(100% - 24px);
            margin: 0 12px;
            left: 0;
            bottom: 12px;
            z-index: 9;
            background: #fff;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
                margin-top: 6px;
            }
        }
        .audit_zero, .audit_one, .audit_err, .audit_wait {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #FFAF39;
            margin-right: 6px;
            position: relative;
            top: -2px;
        }
        .audit_one {
            background: #4CD964;
        }
        .audit_err {
            background: #FF3030;
        }
        .audit_wait {
            background: #1890FF;
        }
        .status-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;

            .status-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 5px;

                &.success {
                    background: #4CD964;
                }

                &.danger {
                    background: #FF3030;
                }

                &.warning {
                    background: #FFA72D;
                }

                &.normal {
                    background: #1890FF;
                }
            }
        }
        .dialog-footer {
            display: flex;
            justify-content: center;
        }
    }
    .resonWrap {
        display: flex;
        flex-direction: column;
        &-title {
            color: #333;
            font-size: 14px;
            margin-bottom: 16px;
            &>span {
                color: #FF3030;
                font-size: 14px;
                padding-right: 2px;
            }
        }
    }
    /deep/ .el-radio-button {
        &.is-active {
            .el-radio-button__inner {
                background: #E6F1FC;
                color: #20A0FF;
                border-color: #20A0FF;
            }
        }
    }
}
</style>

<style lang="less">
    .dormVideoUpload-examine{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-dialog__header {
            padding-top: 10px;
            box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
            display: flex;
            align-items: center;
            background: #FAFAFA;
            border-radius: 4px 4px 0 0;
            .el-dialog__title {
                font-weight: 500;
                color: #333;
                font-size: 14px;
            }
            .el-icon-close:before {
                color: rgb(194,194,194);
                font-size: 17px;
                font-weight: bold;
            }
            .el-dialog__headerbtn {
                top: 14px;
            }
        }
        .el-dialog__body {
            padding-left: 64px;
            padding-right: 64px;
            padding-bottom: 16px;
        }
        .config {
            .el-input__inner {
                background: #F5F5F5;
                border-radius: 4px;
                border: none;
                color: #333;
            }
        }
        .el-textarea__inner {
            resize: none;
        }
    }
</style>
